<template>
    <div id="indexfooter">
      <div class="footer">
   
     <li><router-link to="/index"> 
      <a class='footer-cont' @click.stop="$router.push('/index')"></a>
     <mt-tab-item class="footer-cont" id="index" >
    <img slot="icon" src="./img/shouye.png">
       首页
    </mt-tab-item>
    </router-link>
     </li>
       <li slot='left' @click.stop="$router.push('/video')">
       	<router-link to=""> 
        <a class='footer-cont' @click.stop="$router.push('/video')"></a>
     <mt-tab-item class="footer-cont" id="video">
    <img  slot="icon" src="./img/video.png">
          视频
    </mt-tab-item>
    </router-link>
       </li>
     <li slot='left' @click.stop="$router.push('/login')">
     	<router-link to=""> 
      <a class='footer-cont' @click.stop="$router.push('/login')"></a>
     <mt-tab-item class="footer-cont" id="login">
    <img slot="icon" src="./img/shezhi.png">
     设置
    </mt-tab-item>
    </router-link>
     </li>
     
       <div class="logo center"></div>
        <div class="text center">
            <p class="title">速览</p>
            <p class="title-sub">览一览，秒知道</p>            //需要修改
        </div>
        <a class="down_btn center" ></a>
        <a class="close_btn center" @click='close'></a>
        
  </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            visible: false
        }
    },
    methods: {
        close() {
            this.visible = false
            sessionStorage.setItem('downLoad', 'false') // 关闭之后刷新不会再次出现
        }
    },
    mounted() {
        if (!sessionStorage.getItem('downLoad')) {
            this.visible = true
        }
    }
}

</script>
<style lang="css">
  .footer {
    height: 1.4rem;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid #ccc;
    background-color: #fff;
  }
  .footer-cont {
    float: left;
    width:33.3%;
    height: 10%;
    line-height: 1.4rem;
    font-size: 0.5rem;
    color: #ff8000;
    text-align: center;
  }
  .footer-cont li:active {
    background-color: #ccc;
  }
  .footer-cont:after {
    content: '';
    display: block;
    clear: both;
    width: 0;
    height: 0;
  }

  .footer-cont:hover,.footer-cont:active{ 
    color: white;
    background-color: #C8C6C6;
  }

</style>
